<template>
  <view>
    <div class="editor">
      <div ref="toolbar" class="toolbar"></div>
      <div ref="editor" class="editor-content"></div>
    </div>
  </view>
</template>

<script>
import E from "wangeditor";
import apis from "@/apis.js";
import store from "@/store/index.js";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["TOKEN", "img_url", "userInfo"]),
  },
  mounted() {
    this.editor = new E(this.$refs.toolbar, this.$refs.editor);
    console.log("this.edit", this.editor);
    this.editor.config.menus = [
      "head", // 标题
      "bold", // 粗体
      "fontSize", // 字号
      "fontName", // 字体
      "italic", // 斜体
      "underline", // 下划线
      "strikeThrough", // 删除线
      "foreColor", // 文字颜色
      "backColor", // 背景颜色
      "justify", // 对齐方式
      "quote", // 引用
      "emoticon", // 表情
      "undo", // 撤销
      "redo", // 重复
      "image", // 插入图片
      "video", // 插入视频
    ];


	this.editor.config.uploadImgServer = apis.uploadImage; // 上传接口
	this.editor.config.uploadImgHeaders = {
		Authorization: store.state.TOKEN,
	}; // 上传接口
	this.editor.config.uploadFileName = 'file'; // 上传文件参数名
	this.editor.config.uploadImgHooks = { // 上传完成处理方法
		customInsert: function (insertImg, result) {
			if (result.code === 0) {
				insertImg(`${store.state.img_url}${result.message}`)
			} else {
				uni.showToast({
					title: result.message,
					icon: 'none'
				})
			}
		}
	};

	this.editor.config.uploadVideoServer = apis.uploadImage; // 上传接口
	this.editor.config.uploadVideoHeaders = {
		Authorization: store.state.TOKEN,
	}; // 上传接口
	this.editor.config.uploadVideoName = 'file'; // 上传文件参数名
	this.editor.config.uploadVideoHooks = { // 上传完成处理方法
		customInsert: function (insertImg, result) {
			if (result.code === 0) {
				insertImg(`${store.state.img_url}${result.message}`)
			} else {
				uni.showToast({
					title: result.message,
					icon: 'none'
				})
			}
		}
	};
    
	this.editor.config.onchange = function (html) {
		// 监控变化，同步更新到 textarea
		this.editor.txt.html(html);
	};
    this.editor.create();
	this.test()
  },
  methods: {
    test() {
    //   设置内容
    //   this.editor.txt.html("!213");
      		// 获取内容
    //   var content = editor.txt.html();
    },
  },
};
</script>

<style scoped lang="scss">
.editor-content {
  min-height: 500px;
  border: 2rpx solid #ddd;
}
</style>
